<template>
    <div class="container">
        <div class="upload-box">
            <input type="file" @input="handleChange">
            <div class="upload-text">
                <PlusOutlined />
                <span>上传文件</span>
            </div>
        </div>
        <div class="upload-demo">
            <div class="list-item" v-for="item in fileList">
                <span>{{ getFileSize(item.size) }}</span>
                <img  :src="item.url" />
                <span v-if="item.compressSize">{{ getFileSize(item.compressSize) }}</span>
                <span v-if="item.compressSize">{{getDecreaseRatio(item.compressSize,item.size)}}</span>
                <DownloadOutlined @click="download(item.url)" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { LoadingOutlined, PlusOutlined,DownloadOutlined } from '@ant-design/icons-vue'
import { upload,merge } from '@/api/tools/tinypng/index'
import {getFileSize,getDecreaseRatio} from '@/assets/utils/index'
const fileList = ref([])

const chunkFiles = (files, chunkSize=1024*1024) => {
    const chunks = []
    for (let i = 0; i < files.size; i += chunkSize) {
        const chunk = files.slice(i, i + chunkSize)
        chunks.push(chunk)
    }
    return chunks
}

const uploadFile = (file, index,name) => {
    const formData = new FormData()
    formData.append('index', index)
    formData.append('name', name)
    formData.append('file', file)
    return upload(formData,{
        headers:{
            "content-type": "multipart/form-data"
        }
    })
}

const handleChange = (e) => {
    const file = e.target.files[0]
    const chunks = chunkFiles(file)
    const res = []
    for(let i in chunks){
        res.push(uploadFile(chunks[i],i,file.name))
    }
    Promise.all(res).then(data => {
        merge({
            name: file.name,                
        }).then(res=>{
            console.log(res)
        })
    })
}

const download = (url)=>{
    // a标签下载
    const a = document.createElement('a')
    a.href = url
    a.download = '1.png'
    a.click()
}





</script>

<style lang="scss" scoped>
    .upload-box{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content:center;
        align-items:center;
        border: 1px dashed #ccc;
        cursor: pointer;
        position: relative;
        border-radius: 5px;
        margin:0 auto;
        input{
            opacity:0;
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .upload-text{
            position: absolute;
            display: flex;
            justify-content:center;
            align-items:center;
            width: 100%;
            height: 100%;
            color: #999;
            font-size: 16px;
            font-weight: bold;
            border-radius: 5px;
            transition: all 0.3s ease;
            pointer-events: none;
            &:hover{
                background-color: #f2f2f2;
            }
        }
}
.list-item{
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    img{
        width: 80px;
        height: 80px;
    }
    span{
        margin:0 12px;
    }
}
</style>